
<div class="tab-group flex" data-dui-orientation="vertical">
  <div role="tablist" class="relative flex flex-col border-r border-stone-200">
    <div class="tab-indicator absolute left-0 w-0.5 bg-stone-800 transition-transform duration-300"></div>
    <a href="#" class="tab-link text-sm active px-4 py-2 text-stone-800 hover:text-stone-500" data-dui-tab-target="underline-vertical-html">HTML</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-stone-800 hover:text-stone-500" data-dui-tab-target="underline-vertical-react">React</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-stone-800 hover:text-stone-500" data-dui-tab-target="underline-vertical-vue">Vue</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-stone-800 hover:text-stone-500" data-dui-tab-target="underline-vertical-angular">Angular</a>
    <a href="#" class="tab-link text-sm px-4 py-2 text-stone-800 hover:text-stone-500" data-dui-tab-target="underline-vertical-svelte">Svelte</a>
  </div>
  <div id="underline-vertical-html" class="tab-content text-stone-500 text-sm block p-4">Content HTML</div>
  <div id="underline-vertical-react" class="tab-content text-stone-500 text-sm hidden p-4">Content React</div>
  <div id="underline-vertical-vue" class="tab-content text-stone-500 text-sm hidden p-4">Content Vue</div>
  <div id="underline-vertical-angular" class="tab-content text-stone-500 text-sm hidden p-4">Content Angular</div>
  <div id="underline-vertical-svelte" class="tab-content text-stone-500 text-sm hidden p-4">Content Svelte</div>
</div>
